<template>


    <el-container class="box">

        <el-aside width="200px" class="nav">

            <div class="el-aside__logo">

                超声学习平台
            </div>


            <el-menu
                    active-text-color="#Fff"
                    background-color="#375EDC"
                    :default-active="$route.path"
                    text-color="#fff"
                    router
            >
                <el-sub-menu index="/admin">
                    <!-- 多级菜单的标题 - 具名插槽 title -->
                    <template #title>
                        <el-icon>
                            <!--   <Memo/>-->

                            <el-icon>
                                <HomeFilled/>
                            </el-icon>
                        </el-icon>
                        <span>首页</span>
                    </template>

                    <!-- 展开的内容 - 默认插槽 -->
                    <el-menu-item index="/admin">

                        <span>首页内容</span>
                    </el-menu-item>

                </el-sub-menu>
                <el-sub-menu index="/user">


                    <!-- 多级菜单的标题 - 具名插槽 title -->
                    <template #title>
                        <el-icon>
                            <el-icon>
                                <CopyDocument/>
                            </el-icon>
                        </el-icon>
                        <span>我的学习</span>
                    </template>

                    <!-- 展开的内容 - 默认插槽 -->
                    <el-menu-item index="/admin/learn">
                        <span>学习内容</span>
                    </el-menu-item>

                </el-sub-menu>


                <el-sub-menu index="/admin/income">
                    <template #title>
                        <el-icon>
                            <el-icon>
                                <UserFilled/>
                            </el-icon>
                        </el-icon>
                        <span>会员权益</span>
                    </template>
                    <el-menu-item index="/admin/carList">
                        <span>收益内容</span>
                    </el-menu-item>
                </el-sub-menu>


                <el-sub-menu index="/admin/orders">
                    <template #title>
                        <el-icon>
                            <el-icon>
                                <Memo/>
                            </el-icon>
                        </el-icon>
                        <span>订单信息</span>
                    </template>
                    <el-menu-item index="/admin/carList">
                        <span>会员内容</span>
                    </el-menu-item>
                </el-sub-menu>

                <el-sub-menu index="/admin/carList">
                    <template #title>
                        <el-icon>
                            <el-icon>
                                <Monitor/>
                            </el-icon>
                        </el-icon>
                        <span>远程会诊</span>
                    </template>
                    <el-menu-item index="/admin/consult">
                        <span>会诊内容</span>
                    </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="/admin/carList">
                    <template #title>
                        <el-icon>
                            <el-icon>
                                <Setting/>
                            </el-icon>
                        </el-icon>
                        <span>系统设置</span>
                    </template>
                    <el-menu-item index="/admin/setup">
                        <span>设置内容</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>


        <el-container>
            <el-header class="hd">

                <div>
                    <el-icon>
                        <Fold/>
                    </el-icon>
                    <strong class="hd_txt">
                        首页
                    </strong>
                </div>

                <div class="hd_icon">
                    <el-icon>
                        <QuestionFilled/>
                    </el-icon>


                    <el-icon>
                        <BellFilled/>
                    </el-icon>
                    <el-icon>
                        <CirclePlusFilled/>
                    </el-icon>
                    <div class="red_point">
                        3
                    </div>
                </div>
                <el-dropdown placement="bottom-end" @command="handleCommand">
                    <!-- 展示给用户，默认看到的 -->
                    <span class="el-dropdown__box">
            <el-avatar :src="avatar"/>
                        <span class="user_txt">{{userStore.user.name}}</span>
            <el-icon><CaretBottom/></el-icon>
          </span>
                    <!-- 折叠的下拉部分 -->
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="profile" :icon="User"
                            >基本资料
                            </el-dropdown-item
                            >
                            <el-dropdown-item command="avatar" :icon="Crop"
                            >更换头像
                            </el-dropdown-item
                            >
                            <el-dropdown-item command="password" :icon="EditPen"
                            >重置密码
                            </el-dropdown-item
                            >
                            <el-dropdown-item command="logout" :icon="SwitchButton"
                            >退出登录
                            </el-dropdown-item
                            >
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>


            <el-main>
                <ul class="main_hd">

                    <li>
                        <div class="li_hd">

                            <span>购买课程</span>
                        </div>
                        <div class="li_bd">

                            <div class="bd_left">
                                34
                                <div class="bd_left_txt">课</div>
                            </div>

                            <div class="bd_right">

                                <span>￥<span>468.03</span></span>
                                <div class="bd_left_txt2">金额(元)</div>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="li_item">
                            <div class="li_item_left">
                                12 <span>课</span>
                            </div>
                            <div class="li_item_right">
                                <div class="li_item_right_txt">
                                    待学习
                                </div>
                                <div class="li_item_right_icon">
                                    <el-icon>
                                        <DocumentChecked/>
                                    </el-icon>
                                </div>
                            </div>
                        </div>


                    </li>

                    <li>
                        <div class="li_item">
                            <div class="li_item_left">
                                12 <span>课</span>
                            </div>
                            <div class="li_item_right">
                                <div class="li_item_right_txt">
                                    学习总时长
                                </div>
                                <div class="li_item_right_icon">
                                    <el-icon>
                                        <Tickets/>
                                    </el-icon>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="li_item">
                            <div class="li_item_left">
                                12 <span>课</span>
                            </div>
                            <div class="li_item_right">
                                <div class="li_item_right_txt">
                                    已学习
                                </div>
                                <div class="li_item_right_icon">
                                    <el-icon>
                                        <Monitor/>
                                    </el-icon>
                                </div>
                            </div>
                        </div>
                    </li>

                </ul>


                <div class="quick_notice">

                    <div class="quick">
                        <div class="quick_hd">
                            <i class="iconfont icon-monitor2"></i><span>快速入口</span>
                        </div>
                        <ul>
                            <li>

                                <i class="iconfont icon-shangchuankecheng"></i>
                                <p>我的课程</p>
                            </li>
                            <li>

                                <i class="iconfont icon-wodeshouyi"></i>
                                <p>我的病例</p>
                            </li>
                            <li>

                                <i class="iconfont icon-xuexizhongxin1"></i>
                                <p>学习中心</p>
                            </li>
                            <li>

                                <i class="iconfont icon-yuanchenghuizhen"></i>
                                <p>线上问诊</p>
                            </li>

                        </ul>

                    </div>


                    <div class="notice">

                        <div class="notice_hd">

                            <i class="iconfont icon-gonggao"></i><span>公告</span>
                        </div>


                        <ul>
                            <li>反对反对</li>
                            <li>反对反对</li>
                            <li>反对反对</li>
                            <li>反对反对</li>
                        </ul>

                    </div>

                </div>

                <div class="income_calender">
                    <div class="income">
                        <div class="income_hd">
                            <i class="iconfont icon-tuijiankecheng"></i><span>推荐课程</span>


                            <div class="my_tab">
                                <div class="tab_item" :class="{tab_active: activeIndex===0}" @click="changeType(0)">全部免费
                                </div>
                                <div class="tab_item" :class="{tab_active: activeIndex===1}" @click="changeType(1)">会员免费
                                </div>
                                <div class="tab_item" :class="{tab_active: activeIndex===2}" @click="changeType(2)">付费
                                </div>

                            </div>
                        </div>


                        <ul>
                            <li class="course_item" v-for="item in courseList">
                                <div class="pic">
                                    <!--<img src="@/assets/docker1.jpg" alt="">-->

                                    <video :src="item.video"></video>
                                </div>

                                <div class="txt">

                                    <div class="tab_item" :class="{tab_active: activeIndex===2}"
                                         @click="handleChart(2)">
                                    </div>

                                    <div class="course_name">
                                        {{item.courseName}}
                                    </div>

                                    <div class="course_status">
                                        {{item.status}} <span>累计购买{{item.count}}次</span>
                                    </div>

                                    <div class="course_author">
                                        {{item.hospitalName}} <span class="author">{{item.dockerName}}</span> <span
                                            class="price">￥{{item.price}}</span>
                                    </div>
                                </div>

                                <el-button type="primary" class="btn" v-if="item.s===0" @click="goDetail(item.id)">
                                    立即学习
                                </el-button>

                                <el-button type="warning" class="btn" v-if="item.s===1">成为会员</el-button>
                                <el-button type="success" class="btn" v-if="item.s===2">购买</el-button>


                            </li>


                        </ul>

                        <el-pagination class="fenye"
                                       @size-change="handleSizeChange"
                                       @current-change="handleCurrentChange"
                                       v-model:current-page="pageNum"
                                       v-model:page-size="pageSize"
                                       :page-sizes="[2, 4, 6, 8]"
                                       layout="total, sizes, prev, pager, next, jumper"
                                       :total="total">
                        </el-pagination>


                    </div>
                    <div class="calender">
                        <el-calendar v-model="value"/>
                    </div>
                </div>
            </el-main>

        </el-container>


    </el-container>

</template>

<script setup>
    import {ref, reactive, onMounted, onUpdated} from "vue"
    import {
        Management,
        Promotion,
        UserFilled,
        User,
        Crop,
        EditPen,
        SwitchButton,
        CaretBottom,
        Memo,
        HomeFilled,
        Van,
        CopyDocument,
        Setting,
        Monitor,
        Fold,
        QuestionFilled,
        BellFilled,
        CirclePlusFilled,
        DocumentChecked,
        Tickets,
        Stopwatch,
        DocumentCopy,
        UploadFilled

    } from '@element-plus/icons-vue'

    // import avatar from '@/assets/img/king.png'
    import {useRouter} from 'vue-router'
    import {useUserStore} from '@/stores/user.js'
    import * as echarts from 'echarts';

    const router = useRouter()
    const activeIndex = ref(1)
    const userStore = useUserStore()
    let myChart = ref(null)
    let option = ref(null)

    import axios from 'axios'

    const courseList = ref([])
    const pageNum = ref(1)
    const pageSize = ref(2)
    const total = ref('')

    const type = ref('')

    onMounted(() => {
        list()
    })

    const list = async () => {
        const res = await axios.get('/course/recommend?pageNum=' + pageNum.value + '&pageSize=' + pageSize.value + '&type=' + type.value)
        courseList.value = res.data.data.items
        total.value = res.data.data.total

    }


    const handleSizeChange = (ps) => {
        pageSize.value = ps
        list()
    }


    const handleCurrentChange = (num) => {
        pageNum.value = num
        list()

    }

    const changeType = (item) => {
        type.value = item
        activeIndex.value = item
        list()
    }

    const goDetail = (item) => {
        router.push('/detail?id='+item)
    }


</script>

<style scoped lang="scss">


    li {
        list-style-type: none;
    }

    .box {


        height: 100vh;

        .el-aside {
            background-color: #375EDC;

            &__logo {
                text-align: center;
                height: 120px;
                line-height: 120px;
                color: #fff;
                font-weight: 700;
                font-size: 23px;
                border-bottom: 1px solid #4873fb;
                /* background: url('@/assets/img/logo.png') no-repeat center / 120px auto;*/
            }

            .el-menu {
                border-right: none;

            }
        }

        .hd {
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 23px;

            .hd_txt {
                margin-left: 30px;
            }

        }

    }


    .el-dropdown__box {
        display: flex;
        align-items: center;

        .el-icon {
            color: #999;
            margin-left: 10px;
        }

        &:active,
        &:focus {
            outline: none;
        }
    }


    .el-menu-item:hover,
    .el-submenu__title:hover {
        background-color: #A3A3A3; /* 例如 #ff0000 */


    }


    /* 改变 hover 时的文字颜色 */
    .el-menu-item:hover,
    .el-submenu__title:hover {
        font-size: 20px;
    }

    .el-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #666;
        background-color: #EAEAEA;
    }

    .el-main {
        background-color: #eee;
    }

    .inner {
        width: 100%;
        height: 100%;
        background-color: #fff;
        box-shadow: 21px 0px 25px 0px rgba(13, 5, -2, 0.14)
    }

    .hd_icon {
        margin-left: 1150px;
        position: relative;

        .el-icon {
            margin-left: 30px;
        }

        border-right: 1px solid #C0C4CC;
        padding-right: 30px;

        color: #828594;
    }

    .user_txt {
        margin-left: 20px;
        font-size: 18px;
        color: black;
        margin-right: 10px;
    }

    .red_point {
        position: absolute;
        width: 18px;
        height: 18px;
        background-color: #FA1214;
        border-radius: 50%;
        border: 1px solid #fff;
        left: 97px;
        bottom: 6px;
        line-height: 15px;
        font-size: 13px;
        color: #fff;
        text-align: center;
    }

    .el-main {
        .main_hd {
            display: flex;
            flex-wrap: wrap;
            margin: 0px;
            padding: 0px;

            li {

                background-color: #5EAE59;
                width: 365px;
                height: 140px;
                margin-right: 20px;
                margin-bottom: 14px;
                color: #fff;


                .li_hd {
                    color: #fff;
                    font-size: 20px;


                    border-bottom: 1px solid #efefef;
                    line-height: 36px;

                    span {
                        margin-left: 20px;
                    }

                }


                .li_bd {
                    position: relative;
                    display: flex;
                    justify-content: space-evenly;
                    margin-top: 20px;


                    .bd_left, .bd_right {
                        font-size: 30px;

                    }

                    .bd_left_txt {
                        margin-left: 6px;
                        font-size: 20px;
                        margin-bottom: 3px;
                    }


                    .bd_left_txt2 {
                        margin-left: 35px;
                        font-size: 20px;
                        margin-bottom: 3px;
                    }


                }

            }

            li:nth-child(1) {
                width: 480px;
                background-color: #5477EB;
            }

            li:nth-child(5) {
                background-color: #00C192;
                width: 480px;
            }

            li:nth-child(4) {

                margin-right: 0px;
            }

            li:nth-child(8) {

                margin-right: 0px;
                background-color: #F3B200;
            }

            li:nth-child(2) {
                background-color: #E74F5B;
            }

            li:nth-child(3) {
                background-color: #00B5C0;
            }

            li:nth-child(6) {
                background-color: #2C5BA9;
            }

            li:nth-child(7) {
                background-color: #4892E7;
            }

        }


        .li_item {
            display: flex;
            justify-content: space-evenly;
            line-height: 120px;
            height: 150px;

            .li_item_left {
                font-size: 35px;

                span {
                    font-size: 20px;
                }
            }

            .li_item_right_txt {
                color: #fafafa;
                line-height: 110px;
                height: 50px;
                font-size: 20px;
                opacity: 0.8;
            }

            .li_item_right_icon {
                color: #f9f9f9;
                line-height: 90px;
                height: 30px;
                margin-left: 12px;
                font-size: 35px;
                opacity: 0.8;
            }

        }


    }

    .quick {
        height: 200px;
        width: 1200px;
        background-color: #fff;


        .quick_hd {
            height: 40px;
            border-bottom: 2px solid #ececec;

            i {
                color: #5579EB;
                font-size: 25px;
                margin-left: 15px;
                position: relative;
                top: 2px;
            }

            span {
                font-size: 20px;
                margin-left: 15px;
                line-height: 10px;
            }
        }

        ul {
            display: flex;

            li {
                width: 85px;
                height: 85px;
                background-color: pink;
                margin-left: 60px;
                border-radius: 15%;

                i {
                    font-size: 35px;
                    line-height: 42px;
                    margin-left: 20px;
                    position: relative;
                    top: 20px;
                    left: 3px;
                    color: #Fff;
                }

                p {
                    font-size: 16px;
                    margin-top: 50px;
                    margin-left: 10px;
                }
            }

            li:nth-child(1) {
                background-color: #5579EB;
            }


            li:nth-child(2) {
                background-color: #1CBFAE;

                i {
                    margin-left: 20px;
                }
            }

            li:nth-child(3) {
                background-color: #F2AF20;

                i {
                    margin-left: -4px;
                }
            }

            li:nth-child(4) {
                background-color: #5579EB;

                i {
                    margin-left: 20px;
                }
            }

        }

    }

    .income {

        margin-top: 15px;
        height: 520px;
        width: 1200px;
        background-color: #fff;


        .income_hd {

            height: 60px;
            line-height: 40px;
            border-bottom: 2px solid #ececec;


            i {
                color: #5579EB;
                font-size: 25px;
                margin-left: 15px;
                position: relative;
                top: 12px;
            }

            span {
                font-size: 20px;
                margin-left: 15px;
                line-height: 10px;
                font-weight: 500;
                position: relative;
                top: 10px;
            }


            position: relative;

            /*   .my_tab {
                   display: flex;
                   position: absolute;
                   bottom: 253px;
                   left: 1000px;
                   margin-left: 50px;

                   .tab_item {
                       line-height: 70px;
                       font-size: 20px;
                       height: 62px;
                       margin-left: 50px;
                   }

                   .tab_active {
                       border-bottom: 3px solid #409EFF;
                       // transition: all 0.1s linear;
                   }
               }*/

            .my_tab {
                display: flex;
                position: absolute;
                top: 10px;
                right: 10px;

                .tab_item {
                    font-size: 18px;
                    height: 49px;
                    line-height: 49px;
                    margin-right: 50px;
                }

                .tab_active {
                    color: #409EFF;
                    // transition: all 0.1s linear;
                }

            }


        }

    }


    .quick_notice {
        display: flex;

        .notice {
            width: 455px;
            height: 200px;
            background-color: #fff;
            margin-left: 20px;


            .notice_hd {
                i {
                    color: #5579EB;
                    font-size: 25px;
                    margin-left: 15px;
                }

                span {
                    font-size: 20px;
                    margin-left: 15px;
                    line-height: 10px;
                    font-weight: 500;
                    position: relative;
                    bottom: 2px;
                }

                border-bottom: 2px solid #ececec;
            }


            ul {
                li {
                    font-size: 16px;
                    list-style-type: disc;
                    margin-bottom: 8px;

                }
            }

        }


    }


    .income_calender {
        display: flex;


        .calender {
            width: 455px;
            height: 100px !important;
            margin-left: 15px;
            margin-top: 15px;


        }

    }


    ::v-deep .el-calendar-table .el-calendar-day {
        /* 此处的288是用总高度 - 顶部一个时间选择器高度 - 星期几的高度 - tr中的border */
        height: calc(100px / var(--tr-rows-number));
        padding: 0;

    }


    .course_item {
        width: 1100px;
        height: 150px;
        background-color: #efefef;
        padding: 10px;
        margin-bottom: 15px;
        display: flex;

        justify-content: space-between;

        .pic {
            img {
                height: 150px;
            }

            video {
                height: 150px;
            }

        }

        .txt {

            .course_name {
                margin-top: 10px;
                font-size: 23px;
                color: #2b2b2b;
            }

            .course_status {
                font-size: 16px;
                margin-top: 15px;
                color: #636363;

                span {
                    margin-left: 20px;
                }
            }

            .course_author {
                font-size: 18px;
                margin-top: 15px;

                .author {
                    margin-left: 20px;
                }

                .price {
                    margin-left: 20px;
                    font-size: 25px;
                    color: #FE0100;
                    position: relative;
                    top: 2px;
                }
            }


        }


        .btn {
            border-radius: 15px;
            margin-top: 55px;
        }


    }


    .fenye {
        margin-top: 30px;
        margin-left: 33%;
    }


</style>
